
{#
 This Source Code Form is subject to the terms of the Mozilla Public
 License, v. 2.0. If a copy of the MPL was not distributed with this
 file, You can obtain one at https://mozilla.org/MPL/2.0/.
#}

{% extends "firefox/base/base-protocol.html" %}
{% from "macros-protocol.html" import callout, picto with context %}

{% block page_title %}{{ ftl('set-as-default-landing-make-firefox-your-default') }}{% endblock %}
{% block page_desc %}{{ ftl('set-as-default-landing-choose-the-browser') }}{% endblock %}

{% block page_css %}
  {{ css_bundle('protocol-picto') }}
  {{ css_bundle('protocol-callout') }}
  {{ css_bundle('firefox-default-landing') }}
{% endblock %}

{% set landing_header = ftl('set-as-default-landing-you-should-get') %}
{% set landing_body = ftl('set-as-default-landing-if-you-recently') %}

{% block content %}
  <main>
    {% call callout(
      title=ftl('set-as-default-landing-make-sure-youre-protected'),
      desc=ftl('set-as-default-landing-thanks-for-using-the'),
      class='mzp-t-hero mzp-t-product-firefox',
      include_cta=True,
      heading_level=1,
      brand=True,
      brand_product='firefox',
      brand_type='logo',
      brand_size='lg',
    ) %}
      <div class="cta-container">
        <div class="mzp-c-button-download-container">
          <a id="set-as-default-button" href="{{ url('firefox.set-as-default.thanks') }}" class="mzp-c-button mzp-t-product" data-cta-text="Make Firefox your default browser" data-testid="button-set-as-default">
            {{ ftl('set-as-default-landing-make-firefox-your-default') }}
          </a>
        </div>
      </div>
    {% endcall %}
    <ul class="mzp-l-columns mzp-t-columns-three mzp-l-content mzp-t-content-lg">
      {% call picto(
        title=ftl('set-as-default-landing-choose-automatic-privacy'),
        image=resp_img(
          url='protocol/img/icons/brand/violet/no-eye.svg',
          optional_attributes={
            'class': 'mzp-c-picto-image',
            'width': '64',
            'loading': 'lazy'
          }
        ),
        body=true,
      ) %}
        <p>{{ ftl('set-as-default-landing-companies-keep-finding') }}</p>
      {% endcall %}

      {% call picto(
        title=ftl('set-as-default-landing-choose-freedom-on-every'),
        image=resp_img(
          url='protocol/img/icons/brand/orange/devices.svg',
          optional_attributes={
            'class': 'mzp-c-picto-image',
            'width': '64',
            'loading': 'lazy'
          }
        ),
        body=true,
      ) %}
        <p>{{ ftl('set-as-default-landing-firefox-is-fast-and') }}</p>
      {% endcall %}

      {% call picto(
        title=ftl('set-as-default-landing-choose-corporate-independence'),
        image=resp_img(
          url='protocol/img/icons/brand/blue/mountain.svg',
          optional_attributes={
            'class': 'mzp-c-picto-image',
            'width': '64',
            'loading': 'lazy'
          }
        ),
        body=true,
      ) %}
        <p>{{ ftl('set-as-default-landing-firefox-is-the-only') }}</p>
      {% endcall %}
    </ul>
  </main>
{% endblock %}
